<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢度国庆</title>
    <script src="./js/jquery-3.4.1.js"></script>
    <script src="./js/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            width: 100%;
            height: 700px;
            z-index: -9;
            position: relative;
        }

        .big {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 3;
        }


        #door-left {
            margin: 0;
            padding: 0;
            width: 50%;
            height: 100%;
            float: left;
            background: url(./img/left.png) no-repeat;
            background-size: 100% 100%;
        }

        #door-right {
            margin: 0;
            padding: 0;
            width: 50%;
            height: 100%;
            float: right;
            background: url(./img/right.png) no-repeat;
            background-size: 100% 100%;
        }

        .content {
            position: absolute;
            top: 0px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 0 50px;
            margin-bottom: 250px;
        }

        .lantern-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 设置旋转点 */
            transform-origin: top center;
            animation: swing 3s infinite ease-in-out;
        }

        .lantern-line {
            width: 5px;
            height: 80px;
            background-color: #dc8f03;
        }

        .lantern-body {
            position: relative;
            width: 300px;
            height: 220px;
            background-color: #f00;
            border-radius: 120px;
            box-shadow: 0 30px 115px -10px #fff;
            /* 设置旋转点 */
            transform-origin: top center;
            animation: swing 3s infinite ease-in-out;
        }

        .lantern-body::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translate(-50%, 0);
            width: 100px;
            height: 20px;
            background-color: #dc8f03;
            border-radius: 5px 5px 0 0;
        }

        .lantern-body::after {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translate(-50%, 0);
            width: 100px;
            height: 20px;
            background-color: #dc8f03;
            border-radius: 0 0 5px 5px;
        }

        /* 灯笼的动画效果 */
        @keyframes swing {
            0% {
                transform: rotate(-6deg);
            }

            50% {
                transform: rotate(6deg);
            }

            100% {
                transform: rotate(-6deg);
            }
        }

        .lantern-circle {
            position: absolute;
            top: -5px;
            left: 50%;
            transform: translate(-50%, 0);
            width: 240px;
            height: 230px;
            border: 2px solid #dc8f03;
            border-radius: 50%;
        }

        .lantern-rect {
            position: absolute;
            top: -5px;
            left: 50%;
            transform: translate(-50%, 0);
            width: 90px;
            height: 240px;
            border: 2px solid #dc8f03;
            border-radius: 50%;
        }

        .lantern-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 24px;
            font-size: 24px;
            color: yellow;
            font-weight: 700;
        }

        .lantern-tassel {
            position: absolute;
            bottom: -40%;
            left: 50%;
            transform: translate(-50%, 0);
            width: 5px;
            height: 75px;
            background-color: #dc8f03;
            /* 设置旋转点 */
            animation: swing 3s infinite ease-in-out;
        }

        .lantern-tassel::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 0);
            width: 30px;
            height: 30px;
            background-color: #dc8f03;
            border-radius: 50%;
        }

        .lantern-tassel::after {
            content: '';
            position: absolute;
            bottom: -100%;
            left: 50%;
            transform: translate(-50%, 20%);
            width: 20px;
            height: 100px;
            background-color: #ffa500;
            border-radius: 0 0 5px 10px;
        }

        .switch {
            position: relative;
            display: flex;
            align-items: center;
            width: 300px;
            height: 50px;
            border: 1px solid #000;
            margin: 0 auto;
            border-radius: 50px;
        }

        .switch_item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            color: #f00;
            cursor: pointer;
        }

        .move_block {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 33.3%;
            height: 44px;
            background-color: #000;
            border-radius: 50px;
            z-index: -1;
        }

        .bibox {
            width: 800px;
            height: 400px;
        }

        .wenzi {
            position: relative;
            top: 0px;
            left: 500px;
        }

        .wenzi p {
            color: #fff;
            font-size: 20px;
            font-weight: 800;
            position: absolute;
            top: 50px;
            left: 95px;
            font-family: "宋体";
        }

        .wenzi span {
            color: #fff;
            font-size: 170px;
            font-family: "方正舒体";
            position: absolute;
            top: 20px;
            left: -60px;
            text-shadow:
                1px 1px 0 #CCC,
                2px 2px 0 #CCC,
                3px 3px 0 #444,
                4px 4px 0 #444,
                5px 5px 0 #444,
                6px 6px 0 #444;
        }


        .baner {
            position: absolute;
            top: 600px;
            width: 200px;
            height: 100px;
            background: url(./img/bear.png) no-repeat;
            /* 元素可以添加多个动画， 用逗号分隔 */
            animation: bear .4s steps(8) infinite, move 22s forwards;
        }

        @keyframes bear {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1600px 0;
            }
        }

        @keyframes move {
            0% {
                left: 30%;
            }
            100% {
                left: 90%;
                transform: translateX(-50%);
            }
        }

        video {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .logo {
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .logo img {
            width: 200px;
        }

        ul,
        li {
            text-indent: 0;
            text-decoration: none;
            margin: 0;
            padding: 0
        }

        img {
            border: 0
        }

        /* body {
            background-color: #000;
            color: #999;
            font: 100%/18px helvetica, arial, sans-serif;
        } */

        canvas {
            cursor: crosshair;
            display: block;
            left: 0;
            position: absolute;
            top: 0;
            z-index: 20
        }

        #moon {
            margin-top: 30px;
            margin-left: 900px;
        }

       

        .pull-rope {
            position: absolute;
            top: 0;
            left: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* .mode {
            width: 100px;
            height: 40px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            background: url(https://img2.baidu.com/it/u=580689249,230811503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=234);
            background-size: 100% 100%;
            font-weight: bold;
        } */

        .rope {
            width: 10px;
            height: 300px;
            border-radius: 0 0 5px 5px;
            background: darkorange;
            z-index: 99;
        }
    </style>
</head>

<body>
    <div class="big">
        <div id="door-left"></div>
        <!--左门-->
        <div id="door-right"></div>
        <!--右门-->
    </div>
    <div class="box">
        <video autoplay loop muted preload>
            <source src="./video/背景音频.mp4">
        </video>
        <div class="wenzi">
            <p>2022<br>10.1</p>
            <span>盛世华诞</span>
        </div>
        <div class="baner"></div>
        <div class="content">
            <div class="lantern-box">
                <div class="lantern-line"></div>
                <div class="lantern-body">
                    <!-- 灯笼中间的线条 -->
                    <div class="lantern-circle">
                        <div class="lantern-rect">
                            <!-- 灯笼中间的文字内容 -->
                            <div class="lantern-text">国庆快乐</div>
                        </div>
                    </div>
                    <!-- 灯笼穗 -->
                    <div class="lantern-tassel"></div>
                </div>
            </div>
            <div class="lantern-box">
                <div class="lantern-line"></div>
                <div class="lantern-body">
                    <!-- 灯笼中间的线条 -->
                    <div class="lantern-circle">
                        <div class="lantern-rect">
                            <!-- 灯笼中间的文字内容 -->
                            <div class="lantern-text">国庆快乐</div>
                        </div>
                    </div>
                    <!-- 灯笼穗 -->
                    <div class="lantern-tassel"></div>
                </div>
            </div>
        </div>
        <div class="logo">
            <img src="./img/logo.png" alt="">
        </div>
    </div>
    <div class="musci">
        <audio autoplay="autoplay" loop="loop" preload="auto" hidden="true" src="./video/祖海 - 好运来.mp3"></audio>
    </div>
    <script>
        
    </script>


</body>

</html>